<template>
  <div class="article">
    <div class="shang">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>条件查询</span>
        </div>
        <el-form
          :inline="true"
          :model="fromData"
          size="mini"
          class="demo-form-inline"
        >
          <el-form-item label="作者">
            <el-input v-model="fromData.author" placeholder="请输入作者" />
          </el-form-item>
          <el-form-item label="标题">
            <el-input v-model="fromData.title" placeholder="请输入标题" />
          </el-form-item>
          <el-form-item label="编辑类型">
            <el-select
              v-model="fromData.editorType"
              placeholder="活动编剧类型区域"
            >
              <el-option label="富文本" value="0" />
              <el-option label="MarkDown" value="1" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
    <el-card class="boxcard">
      <el-button type="primary" @click="gouNewly">新增按钮</el-button>
      <el-button @click="daocuu">点击导出</el-button>

    </el-card>
    <div class="xia">
      <el-table :data="list" border style="width: 100%">
        <el-table-column type="index" label="#" width="50" />
        <el-table-column prop="title" label="文章标题" width="150px" />
        <el-table-column prop="coverImg" label="展示图片">
          <template v-slot="sisui">
            <img
              style="width: 100px; height: 100px"
              :src="sisui.row.coverImg"
              alt=""
            >
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="添加时间" />
        <el-table-column prop="author" label="文章作者" />
        <el-table-column prop="isShow" label="文章是否展示">
          <template v-slot="sisui">
            <el-switch
              v-model="sisui.row.isShow"
              active-color="#13ce66"
              inactive-color="#ff4949"
              @change="switchEvent(sisui.row)"
            />
          </template>
        </el-table-column>
        <el-table-column prop="content1" label="内容">
          <template v-slot="sisui">
            <div v-html="sisui.row.content1" />
          </template>
        </el-table-column>
        <el-table-column prop="name" class="kuan" fixed="right" label="操作">
          <template v-slot="sisui">
            <div>
              <el-link
                style="margin-right: 20px"
                :underline="false"
                icon="el-icon-edit"
                type="primary"
                @click="openxiugai(sisui.row)"
              >编辑文章</el-link>
              <el-link
                :underline="false"
                type="danger"
                @click="open(sisui.row)"
              >删除</el-link>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :current-page="start"
        :page-sizes="[1, 5, 10, 15, 20]"
        :page-size="limit"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
import { findArticles, changeShowStatus, del } from '@/api/Management/article/index.js'
export default {
  data() {
    return {
      // 总数据条数
      list: [],
      // 页数
      start: 1,
      // 条数
      limit: 10,
      total: 0,
      // 表单数据
      fromData: {
        author: '',
        collectCount: '',
        content1: '',
        content2: '',
        coverImg: '',
        createTime: '',
        editorType: '',
        id: '',
        isShow: '',
        modifyTime: '',
        summary: '',
        title: '',
        viewCount: '',
        zanCount: ''
      }
    }
  },
  created() {
    this.init()
  },
  methods: {
    // 调用接口
    init() {
      findArticles(this.start, this.limit, this.fromData).then((res) => {
        console.log(res)
        this.total = res.data.total
        res.data.rows.forEach(row => {
          row.isShow = !!row.isShow
        })
        this.list = res.data.rows
      })
    },
    // 点击页数发送请求新数据
    handleCurrentChange(e) {
      console.log(e)
      this.start = e
      this.init()
    },
    // 点击条数/页触发请求新数据
    handleSizeChange(e) {
      this.limit = e
      this.init()
    },
    // 点击查询发送请新数据
    onSubmit() {
      this.init()
    },
    daocuu() {
      // 导出
    //   import('@/vendor/Export2Excel').then(excel => {
    //     const tHeader = ['文章标题', '展示图片', '添加时间', '文章作者', '内容']
    //     const filterVal = ['title', 'coverImg', 'createTime', 'author', 'content1']
    //     const data = this.formatJson(filterVal, this.list)
    //     excel.export_json_to_excel({
    //       header: tHeader, // 表头 必填
    //       data, // 具体数据 必填
    //       filename: 'excel-list', // 非必填
    //       autoWidth: true, // 非必填
    //       bookType: 'xlsx' // 非必填
    //     })
    //   })c
    // },
    // formatJson(filterVal, jsonData) {
    //   return jsonData.map(v => filterVal.map(j => {
    //     return v[j]
    //   }))
    },
    // 点击开关决定图片是否展示
    switchEvent(e) {
      // console.log(e)
      const id = e.id
      changeShowStatus({
        isShow: (e.isShow ? 1 : 0),
        id: id
      })
    },
    // 点击删除调用接口
    open(e) {
      // console.log(e.id)
      const id = e.id

      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        del(
          id
        ).then(res => {
          // console.log(res)
          // console.log(res.success)
          if (res.success) {
            // this.$message('删除成功');
            this.init()
          } else {
            this.$message('删除失败')
          }
        })
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 点击编辑文字内容
    openxiugai(e) {
      console.log(e)

      console.log(e.id)
      const id = e.id
      this.$router.push(`/Management/redact?id=${id}`)
    },
    // 点击新增按钮跳转
    gouNewly() {
      this.$router.push('/Management/newly')
    }
  }
}
</script>

<style lang="scss" scoped>
.article {

  ::v-deep img {
    width: 100px;
    height: 100px;
  }
  .shang {
    margin: 30px;
  }
  .boxcard {
    margin: 30px 30px -30px;
  }
  .xia {
    margin: 30px;
  }
}
</style>
